<template>
  <div class="main" id="main">
    <div id="map" class="map"></div>
    <div id="contextmenu_container" class="contextmenu">
        <ul class="container">
            <li @click.stop="clickmenu('first',$event)">关键节点标绘</li>
            <li @click.stop="clickmenu('second',$event)">关键链路标绘</li>
            <li @click.stop="clickmenu('third',$event)">关键路径标绘</li>
            <li @click.stop="clickmenu('fourth',$event)">路径规划</li>
            <li @click.stop="clickmenu('five',$event)">路径导航</li>
        </ul>
    </div>
    <div id="contextmenu_container1" class="contextmenu">
        <ul class="container">
            <li >设为起点</li>
            <li >设为必经点</li>
            <li >设为规避点</li>
            <li >设为入口点</li>
            <li >设为终点</li>
        </ul>
    </div>
    <div id="popupDom" class="ol-popup" style="color:#fff;">
      <div class="ol-popup-content"></div>
    </div>
    <Head class="head" />
    <Footer class="footer" />
    <Search class="search" />
    <Menu class="menu" />
    <EditDialog class="editdialog" />
    <D3 class="d3style" />
    <div class="eyestyle" >
      <span class="eye" @click='clickeye'><img src="img/eye.png" style="margin: 8px 0 0 7px;width:26px;"></span>
      <a style="margin-left:10px;cursor:pointer" v-if="eyeshow" @click="$store.commit('SHOW_D3_BOX', false)" ><img src="img/physics_view.png"></a>
      <a style="margin-left:10px;cursor:pointer" v-if="eyeshow" @click="$store.commit('SHOW_D3_BOX', true)" ><img src="img/struct_view.png"></a>
    </div>
  </div>
</template>

<script lang="ts">
import {Component ,Vue ,Watch ,} from 'vue-property-decorator'

import "ol/ol.css";
import Map from 'ol/Map'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import * as olControl from 'ol/control'
import Feature from 'ol/Feature'
import { Icon, Style, Stroke, Circle, Fill } from 'ol/style'
import Point from 'ol/geom/Point'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import VectorSource from 'ol/source/Vector'
import { defaults as defaultInteractions, Select } from 'ol/interaction'
import Overlay from 'ol/Overlay'
import GeoJSON from 'ol/format/GeoJSON'
import { getVectorContext } from 'ol/render'
import { unByKey } from 'ol/Observable'
import { LineString } from 'ol/geom'
import { getLength } from 'ol/sphere'
import Draw from 'ol/interaction/Draw'

import Footer from '@/components/Footer.vue'
import Head from '@/components/Head.vue'
import Search from '@/components/Search/Search.vue'
import Menu from '@/components/Menu/Menu.vue'
import EditDialog from '@/components/Search/Dialog/EditDialog.vue'
import D3 from '@/components/D3/D3.vue'

@Component({
  components:{
    Footer,
    Head,
    Search,
    Menu,
    EditDialog,
    D3
  },
  computed: {},
})
export default class Mapdata extends Vue {
  private map:any=null
  private layers:any=null
  private coordinate:Array<any>=[]  //右键坐标
  private menu_overlay:any=undefined
  private menu_overlay1:any=undefined
  private menu_overlay2:any=undefined
  private styles:any=null
  private selStyle:any=null
  private source:any=null
  private pointLayer:any=null
  private measureLayer:any=null
  private selectInteraction:any=null
  private featuresJson:any=null
  

  private eyeshow=false
  

  public created() {
    
  }

  public mounted() {
    this.initMap()
    this.$bus.$on('mapdata',(data:any)=>{
      this.featuresJson=data
      this.source.clear()
      this.menu_overlay.setPosition(undefined)
      this.menu_overlay1.setPosition(undefined)
      // unByKey(this.layerPostrenderListeners)

      if (this.featuresJson != null) {
        this.source.addFeatures((new GeoJSON()).readFeatures(this.featuresJson))
      }
    })
  }
   private initMap(){
      var that:any =this

      this.styles = {
        Point: new Style({
          image: new Icon({
            anchor: [0.5, 1],
            size: [22, 34],
            offset: [200, 188],
            src: `${process.env.BASE_URL}img/markers.png`
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#f5ffb2',
            width: 3
          })
        })
      }

      this.selStyle = {
        Point: new Style({
          image: new Icon({
            anchor: [0.5, 1],
            size: [22, 34],
            offset: [200, 224],
            src: `${process.env.BASE_URL}img/markers.png`
          })
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: '#7ff300',
            width: 3
          })
        })
      }
      

      
      this.menu_overlay = new Overlay({             //这是点击节点  显示名字的弹框
          element: document.getElementById("popupDom"),
          positioning: 'center-center',
          stopEvent: false,
          // offset: [60, 100],
          offset: [0, -50],
          autoPan: true,
          autoPanAnimation: {
            duration: 50
          }
      });

      this.menu_overlay1 = new Overlay({
          element: document.getElementById("contextmenu_container"),    //这是地图右击弹框
          positioning: 'center-center',
          stopEvent: false,
          offset: [60, 100],
          // offset: [0, -50],
          autoPan: true,
          autoPanAnimation: {
            duration: 50
          }
      });

      this.menu_overlay2 = new Overlay({
          element: document.getElementById("contextmenu_container1"),    //这是地图右击弹框
          positioning: 'center-center',
          stopEvent: false,
          offset: [60, 100],
          // offset: [0, -50],
          autoPan: true,
          autoPanAnimation: {
            duration: 50
          }
      });
      
      this.source = new VectorSource({
        features: []
      })
      this.pointLayer = new VectorLayer({
        source: this.source,
        style: (feature:any) => { return this.styles[feature.getGeometry().getType()]}
      })

      this.measureLayer = new VectorLayer({
        source: new VectorSource({
          features: []
        }),
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      })

       this.selectInteraction = new Select({
        // condition: (evt) => {console.log(evt.type);return evt.type == 'pointermove' || evt.type == 'singleclick';},
        layers: [this.pointLayer],
        style: (feature:any) => { return this.selStyle[feature.getGeometry().getType()] }
      })
      this.layers = [
          new TileLayer({
            source: new XYZ({
              url:
                "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"  // 引入暗系瓦片地图服务
            })
            
          }),
          this.pointLayer,
          this.measureLayer
      ];
      this.map = new Map({
        controls: olControl.defaults({ attribution: false, zoom: false, rotate: false }),   // 隐藏放大缩小按钮
        interactions: defaultInteractions().extend([
          this.selectInteraction
        ]),
        layers: this.layers,
        target: "map",
        view: new View({
          projection: "EPSG:4326",
          center: [106.403874, 29.932153],    //中心点
          zoom: 5   //瓦片层级
        })
       
      });

      this.menu_overlay.setMap(this.map);
      this.menu_overlay1.setMap(this.map);
      this.menu_overlay2.setMap(this.map)
      this.map.on("moveend",function(e: any){
          var zoom = that.map.getView().getZoom();  //获取当前地图的缩放级别
          that.menu_overlay.setPosition(undefined)
          that.menu_overlay1.setPosition(undefined)
          console.log(zoom)
      });
      this.map.on('click', function (e: any) {  //点击map事件
            that.menu_overlay.setPosition(undefined)
            that.menu_overlay1.setPosition(undefined)
            that.menu_overlay2.setPosition(undefined)
            const feature = that.map.forEachFeatureAtPixel(e.pixel, (feature1) => {
            return feature1
          })
          if (feature && feature.getId() !== undefined && feature.getGeometry().getType() === 'Point') {
            feature.getId()
            that.getById(feature.getId())

          } else {

          }
      })
      this.map.on('contextmenu', function (event: any) {  //点击map事件
            event.preventDefault();
            const feature = that.map.forEachFeatureAtPixel(event.pixel, (feature1) => {
                return feature1
            })
            that.menu_overlay.setPosition(undefined)
            if (feature && feature.getId() !== undefined && feature.getGeometry().getType() === 'Point') {  
              
              that.menu_overlay1.setPosition(undefined)
              that.coordinate = event.coordinate  //右键的坐标
              that.menu_overlay2.setPosition(that.coordinate);
            } else {
              
              that.menu_overlay2.setPosition(undefined)
              console.log(event)
              that.coordinate = event.coordinate  //右键的坐标
              that.menu_overlay1.setPosition(that.coordinate);
            }
      })
      var div:any=document.getElementById('map')
    
    }
    private getById(id:any){
      const feature = this.source.getFeatureById(id)
        this.selectInteraction.getFeatures().clear()

        if (feature) {
          this.selectInteraction.getFeatures().push(feature)

          const coordinates = feature.getGeometry().getCoordinates()
          document.getElementById('popupDom').getElementsByClassName('ol-popup-content')[0].innerHTML = feature.get('name')
          this.menu_overlay.setPosition(coordinates)
        }
    }

  private clickmenu(index:string,e:any){   //右键弹框的事件
    e.preventDefault(); 
    console.log(index)
    this.$store.commit('SET_ALGO_SHOW',true)
    this.$bus.$emit('clickmenu',index)
    this.$bus.$emit('closebox')
  }

  private clickeye(){
    this.eyeshow=!this.eyeshow
  }
  
}
</script>

<style lang='scss'>

  .main{
    position: relative;
    width: 100%;
    height:100vh;
    background:#00192e;
    .map {
        width: 100%;
        height:100%;
    }
    .footer{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 30px;
      color: #fff;
      line-height: 30px;
      background-color: #153454;
      font-size: 12px;
    }
    .head{
      position: absolute;
      left: 0;
      top: 0;
      padding: 0 15px;
      width: 100vw;
      height: 55px;
      color: #fff;
      font-size: 12px;
      background: transparent url(/img/head_bg.png) center center no-repeat;
      box-sizing: border-box;
      z-index: 9999;
    }
    .search{
      position: absolute;
      left: 20px;
      top: 70px;
      width: 350px;
    }
    .menu{
      position: absolute;
      top: 70px;
      right: 15px;
    }
    .editdialog{
      position: absolute;
      top: 120px;
      right: 15px;
    }
    .d3style{
      position: absolute;
      top:120px;
      left:15px;
      // width: 98vw;
      // height: 82vh;
      z-index: 99;
    }
    .eyestyle{
      position: absolute;
      bottom: 30px;
      right: 15px;
      .eye{
        height: 40px;
        width: 40px;
        border-radius: 10px;
        border: 1px solid #448dcc;
        display: inline-block;
        cursor:pointer;
        background: rgba(21, 52, 84,0.5);
        margin-bottom: 10px;
      }
    }
    .contextmenu{
      background-color: rgb(21, 52, 84);
      color: #fff;
      font-size: 14px;
      width: 125px;
      z-index: 9999;
      .container>li:hover{
        color:#23eafe
      }
      li{
        list-style-type: none;
        padding: 10px 20px;
        cursor: pointer;
      }
      
    }
    
    ul{
      padding: 0;
    }
  }
  
</style>
